{{--/**
 * Created by PhpStrom
 * User: 郭碧云
 * Date: 2021/3/15 11:32
 * Desc:
 */--}}
@extends('layout.admin')

@section("title")
    权限管理
@endsection

@section('content')
    {{--修改样式--}}
    <style>
        .layui-input {
            width: 60% !important;
        }

        .layui-edge {
            right: 161px !important;
        }

        .layui-form-select dl {
            min-width: 60% !important;
        }

        .layui-form-label {
            width: 134px !important;
        }

        .layui-input-block {
            margin-left: 164px !important;
        }

        .layui-form-switch {
            border-radius: 6px !important;
        }

    </style>
    <link href="{{asset('css/tree/tree.css')}}" rel="stylesheet" />
    <div class="layui-card-body ">
        <form class="layui-form layui-col-space5">
            @can("system.permission.create")
            <div class="layui-inline layui-show-xs-block">
                <a onclick="admin.openLayerForm('{{ route("system.permission.create") }}', '添加权限', 'POST', '500px', '420px',0,'#permission_create')" class="layui-btn" data-method="create" data-type="auto" id="create"><i class="layui-icon"></i>添加</a>
            </div>
            @endcan
        </form>
    </div>
    <div class="layui-card-body ">
        <table class="layui-table layui-form" id="tree-table" lay-size="sm"></table>
    </div>
@endsection

@section('script')

    <script src="{{asset('js/table/tree.js')}}"></script>
    <script>
        var group=@json($group);
        layui.use(['form', 'table', 'treeTable'], function () {
            var table = layui.table;
            var form = layui.form;
            table.init("table-hide");
            var treeTable = layui.treeTable;
            treeTable.render({
                elem: '#tree-table',
                data: {!! $permissions !!},
                icon_key: 'name',
                parent_key: "parent_id",
                end: function (e) {
                    form.render();
                },
                cols: [
                    {
                        key: 'id',
                        title: 'ID',
                    },
                    {
                        key: 'name',
                        title: '名称',
                        template: function (item) {
                            if (item.parent_id == 0) {
                                return '<span style="color:red;">' + item.name + '</span>';
                            } else {
                                return '<span style="color:green;">' + item.name + '</span>';
                            }
                        }
                    },
                    {
                        key: 'display_name',
                        title: '显示名',
                        template: function (item) {
                            if (item.parent_id == 0) {
                                return '<span style="color:red;">' + item.display_name + '</span>';
                            } else {
                                return '<span style="color:green;">' + item.display_name + '</span>';
                            }
                        }
                    },
                    {
                        key: 'guard_name',
                        title: '守卫',
                    },
                    {
                        key: 'parent_id',
                        title: '父级ID',
                    },
                    {
                        key: 'type',
                        title: '分类',
                        template: function (item) {
                            return group[item.type]['name'];
                        }
                    },
                    {
                        key: 'status',
                        title: '可操作性',
                        template: function (item) {
                            if(item.status==1){
                                return '@if(_can("system.permission.status"))<a class="layui-btn-xs">'
                                    +'<input type="checkbox" checked="" name="status"'
                                    +'       data-id="'+item.id+'" lay-skin="switch"'
                                    +'       lay-filter="switchTest" lay-text="NO|OFF">'
                                    +'</a>@endif';
                            }
                            if(item.status==0){
                                return '@if(_can("system.permission.status"))<a class="layui-btn-xs">'
                                    +'<input'
                                    +' type="checkbox" name="status"'
                                    +'       data-id="'+item.id+'" lay-skin="switch"'
                                    +'       lay-filter="switchTest" lay-text="NO|OFF">'
                                    +'</a>@endif';
                            }

                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        template: function (item) {
                            return '@if(_can("system.permission.edit"))<a onclick="admin.openLayerForm(\'/system/permission/edit/'+item.id+'\', \'修改权限\', \'POST\', \'500px\', \'420px\',0,\'#permission_edit\')" class="layui-btn layui-btn-xs btn_edit" data-method="edit" data-type="auto" lay-filter="edit">编辑</a>@endif';
                        }
                    }
                ]
            });

            //监听用户状态开关
            form.on('switch(switchTest)', function (data) {
                let status = this.checked ? 1 : 0;
                const id = data.elem.getAttribute('data-id');
                $.ajax({
                    url: '{{route('system.permission.status')}}',
                    data: {"data":{"id": Number(id), "status": status}},
                    method: "get",
                    success: function (res) {
                        if (res.error > 0) {
                            //错误框
                            layer.msg(res.msg, {
                                anim: 6,
                                icon: 5,
                                time: 3000
                            });
                            if (res.error == 70001) {
                                location.reload();
                            }
                            return false;
                        }
                        layer.msg(res.msg, {icon: 6});
                    }
                });
            });
        });
    </script>
    <script src="{{asset('js/layCommon.js')}}"></script>
@endsection

